<template>
  <view class="ai-chat-app">
    <view class="ai-message-container">
      <scroll-view class="ai-message-list" 
        :scroll-top="messageOffsetHeight" 
        scroll-with-animation 
        :style="messageContainerStyle" 
        :scroll-y="true">
        <slot></slot>
      </scroll-view>
    </view>
    <view class="ai-chat-footer" :class="{'only-composer': !hasReply}">
      <ai-quick-replies v-if="hasReply" 
        :items="quickReplies" 
        @quickReplyClick="handleReplyClick"></ai-quick-replies>
      <ai-composer v-if="composer" ref="composerRef" 
        :placeholder="placeholder" 
        @send="handleSend"></ai-composer>
    </view>
  </view>
</template>

<script>
  /**
   * 聊天对话
   * @description 聊天对话
   * @property {String} placeholder 文本输入框的 placeholder
   * @property {Array} quickReplies 快捷操作列表对应数据模型为：{name:'',code:'',icon:'',isNew:true,isHighlight:true}
   */
  export default {
    name: "ai-chat",
    emits: ["quickReplyClick", "send"],
    props: {
      placeholder: String,
      composer: {
        type: Boolean,
        default: true,
      },
      quickReplies: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        footHeight: 0,
        messageOffsetHeight: 0,
      };
    },
    computed: {
      messageContainerStyle: {
        get: function() {
          let footHeight = this.footHeight
          return `height:calc(100vh - ${footHeight}px);`
        }
      },
      hasReply: function() {
        return this.quickReplies && this.quickReplies.length > 0
      }
    },
    mounted() {
      this.getMessageHeight()
    },
    methods: {
      getMessageHeight() {
        const query = uni.createSelectorQuery().in(this)
        query.select(".ai-chat-footer").boundingClientRect(data => {
          this.footHeight = data.height
        }).exec()
      },
      scrollBottom() {
        const query = uni.createSelectorQuery().in(this)
        query.select(".ai-message-list").boundingClientRect(data => {
          const messageHeight = data.height
          this.messageOffsetHeight = this.messageOffsetHeight + messageHeight
        }).exec()
      },
      handleReplyClick(e) {
        this.$emit("quickReplyClick", e)
      },
      composerInputFocus() {
        this.$refs.composerRef.inputFocus()
      },
      handleSend(msg) {
        this.$emit("send", msg)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-chat-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gray-6);
    color: $body-color;
    font-family: $font-family-base;
    line-height: $line-height-base;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
  }

  .ai-message-container {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;

    // & > .PullToRefresh {
    //   flex: 1;
    // }
    &:focus {
      outline: 0;
    }
  }

  .ai-message-list {
    padding: $message-list-padding;
    box-sizing: border-box;
    font-size: 15px;
  }


  .ai-chat-footer {
    position: relative;
    z-index: $zindex-footer;
    
    padding-bottom: var(--safe-bottom);
    background: var(--gray-7);
    
    &.only-composer {
      padding-top: 8px;
    }
  }
</style>